import React, { ReactElement, useState, useEffect } from 'react'
// import style from './index.less'
import { Table, Button, Card, Modal, Input, Form } from 'antd';
import { useDispatch, useSelector } from 'umi'

interface Props {

}
const tailLayout = {
	wrapperCol: {
		offset: 8,
		span: 16,
	},
};
export default function Admin({ }: Props): ReactElement {
	const dispatch = useDispatch()
	const { adminData } = useSelector((state:any) => {
		return state.adminModel
	})
	
	const [columns, setColumns] = useState([
		{
			title: '姓名',
			dataIndex: 'realname',
			key: 'realname'
		},
		{
			title: '账号',
			dataIndex: 'account',
			key: 'account',
		},
		{
			title: '联系方式',
			dataIndex: 'telephone',
			key: 'telephone',
		},
		{
			title: '操作',
			render: (text: any) => (
				<>
					<Button type='primary' onClick={() => delOne(text)} danger style={{ marginRight: '10px' }}>删除</Button>
				</>
			),
		}
	])
	const [isModalVisible, setVisible] = useState(false)
	
	// 删除
	const delOne = (data: any) => {
		dispatch({
			type: 'adminModel/delOneAdmins',
			payload:{_id:data._id}
		})
	}
	// 页面加载完成获取人员
	useEffect(() => {
		dispatch({
			type: 'adminModel/gteAdmin'
		})
	}, [])
	// 新增表单的显示和隐藏
	const showModal = (e: { preventDefault: () => void; }) => {
		e.preventDefault()
		setVisible(!isModalVisible)
	}
	const handleOk = () => {
		setVisible(!isModalVisible)
	}
	const handleCancel = () => {
		setVisible(!isModalVisible)
	}
	// 新增人员
	const onFinish = (val: any) => {
		console.log(val);
		dispatch({
			type: 'adminModel/addOneAdmins',
			payload:val
		})
		setVisible(!isModalVisible)
	}
	return (
		<div>
			<Card title='人员管理' extra={<a onClick={showModal}>新增</a>} style={{ width: '100%' }}>
				<Table
					bordered
					columns={columns}
					pagination={{ defaultCurrent: 1, defaultPageSize: 5 }}
					dataSource={adminData}
					rowKey={(record) => record._id} />
			</Card>
			<Modal
				title="新增用户"
				destroyOnClose={true}
				visible={isModalVisible}
				onCancel={handleCancel}
				onOk={handleOk}
				footer={null}
			>
				<Form
					name="basic"
					labelCol={{ span: 4 }}
					wrapperCol={{ span: 15 }}
					initialValues={{ remember: true }}
					onFinish={onFinish}
				>
					<Form.Item
						label="姓名"
						name="realname"
						rules={[{ required: true }]}
					>
						<Input />
					</Form.Item>
					<Form.Item
						label="账号"
						name="account"
						rules={[{ required: true }]}
					>
						<Input />
					</Form.Item>
					<Form.Item
						label="密码"
						name="password"
						rules={[{ required: true }]}
					>
						<Input.Password />
					</Form.Item>
					<Form.Item
						label="联系方式"
						name="telephone"
						rules={[{ required: true }]}
					>
						<Input />
					</Form.Item>
					<Form.Item {...tailLayout}>
						<Button type='primary' htmlType="submit">确认新增</Button>
					</Form.Item>
				</Form>
			</Modal>
		</div>
	)
}
